<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>立体仓储系统-侧/俯视图</title>
	<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
	<link rel="stylesheet" href="css/all.min.css">
	<link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.7.1.min.js"></script>
	<script src="js/index.js"></script>
	<script src="js/data-wms.js"></script>
    <style>
		body {
			overflow: auto;
        }
        .summary-stats {
            display: flex;
            font-size: 16px;
            font-weight: bold;
            color: #e6e6e6;
			height: 16px;
        }
        .progress-bar {
            flex: 1;
            height: 20px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 7px;
            overflow: hidden;
            position: relative;
            max-width: 400px;
        }
        .progress-fill {
            height: 100%;
            background: #2a9d8f;
            width: 20%;
            border-radius: 7px;
            transition: width 0.5s ease;
            position: relative;
        }
        .progress-fill-80 {
            background: #e7b151;
        }
        .progress-fill-100 {
            background: #e76f51;
        }
        .progress-text {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #e6e6e6;
            font-size: 14px;
        }
		
		#warehouseDisplay{
			margin-left:80px;
		}
		
		/* 内容区样式 */
		.view-title {
			margin:10px 0px 5px;0px;
			color:#fff;
			font-weight: bold;
		}
		.view-title .fas {
			cursor: pointer;
			margin-right: 8px;
			transition: transform 0.3s;
		}
		
        .view-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .rack-group {
            display: flex;
            gap: 15px;
            padding: 3px;
			align-items: center;
            border: 0px solid #ddd;
        }
		.rack-group-row:nth-child(even){
			margin-bottom: 20px;
		}
		
        .group-title {
			white-space: nowrap;
            color: #90e0ef;
            text-align: center;
			width: 30px;
			flex-shrink: 0;
        }

        .row {
            display: flex;
            gap: 1px;
            justify-content: center;
        }
        .rack {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
            flex-shrink: 0;
            font-size: 14px;
            position: relative;
        }
		.rack.exists {background-color: rgba(255, 255, 255, 0.2); } /* 该位置存在库位 */
        .rack.free { background-color: #2a9d8f; } /* 正常 */
        .rack.occupied { background-color: #e76f51; } /* 禁用 */
		
		.rack .goods-icon {
            font-size: 28px;
            opacity: 1;
        }
		.goods-icon.stored {
			color: #90e0ef;
		}
		.goods-icon.storing {
			color: #e6e6e6;
		}
		.goods-icon i{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 8px;
            opacity: 1;
		}
		.runstate-icon-totime {
			color: #e7b151;
		}
		.runstate-icon-ontime {
			color: #e76f51;
		}
		.runstate-icon-overtime {
			color: #f22;
		}
		
		
	  /* 自定义提示框 */
	  .custom-tooltip {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 160px;
		background: white;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		border-radius: 4px;
		padding: 2px;
		display: none;
		z-index: 100;
		font-size: 12px;
	  }
	  .tooltip-content {
		display: flex;
	  }
	  .tooltip-column {
		flex: 1;
		padding: 0 5px;
	  }
	  .tooltip-divider {
		width: 1px;
		background: #eee;
		margin: 0 2px;
	  }
	  .tooltip-title {
		font-weight: bold;
		margin-bottom: 6px;
		color: #333;
	  }
	  .tooltip-item {
		margin-bottom: 3px;
		color: #666;
	  }
	  .custom-tooltip:after {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border-width: 8px;
		border-style: solid;
		border-color: white transparent transparent transparent;
	  }
	  .tooltip-fas{
		float:right;
		padding:0 3px 2px 0;
		font-size:12px;
		color:#2a9d8f;
		cursor: pointer; 
	  }
	  .tooltip-fas:hover{
		transform: scale(1.2);
	  }
	  .rack.exists:hover .custom-tooltip {
		display: block;
		z-index:9999;
	  }
	  
	  /* 消息通知样式 */
		.message-notification {
			opacity: 0.8;
			position: fixed;
			bottom: 20px;
			right: 20px;
			z-index: 1000;
		}
		.message-icon {
			width: 50px;
			height: 50px;
			background-color: #00b4d8;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			box-shadow: 0 2px 10px rgba(0,0,0,0.2);
			transition: all 0.3s;
		}
		.message-icon:hover {
			background-color: #0096c7;
			transform: scale(1.1);
		}
		.message-icon i {
			color: white;
			font-size: 24px;
		}
		.message-badge {
			position: absolute;
			top: -5px;
			right: -5px;
			background-color: #e76f51;
			color: white;
			border-radius: 50%;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
		}
		.message-panel {
			position: absolute;
			bottom: 60px;
			right: 0;
			width: 400px;
			background-color: rgba(26, 26, 46, 0.9);
			border-radius: 8px;
			box-shadow: 0 4px 15px rgba(0,0,0,0.3);
			backdrop-filter: blur(10px);
			display: none;
			flex-direction: column;
			max-height: 400px;
			overflow: hidden;
			border: 1px solid rgba(0, 180, 216, 0.2); /* 添加边框 */
		}
		.message-panel.active {
			display: flex;
		}
		.message-header {
			padding: 5px 10px;
			background-color: rgba(0, 180, 216, 0.2);
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}
		.message-header h3 {
			margin: 0;
			color: #90e0ef;
			font-size: 16px;
		}
		.message-actions {
			display: flex;
			align-items: center;
		}
		
		.clear-messages {
			background: transparent;
			border: none;
			color: #90e0ef;
			padding: 0;
			cursor: pointer;
			transition: all 0.3s;
			font-size: 14px;
			margin-right: 15px;
		}
		
		.clear-messages:hover {
			color: #e76f51;
		}
		.message-close {
			cursor: pointer;
			color: #90e0ef;
			font-size: 18px;
			transition: all 0.3s;
			margin-left: auto; /* 让关闭按钮靠右 */
		}
		.message-close:hover {
			color: #e76f51;
			transform: rotate(90deg);
		}
		.message-body {
			flex: 1;
			overflow-y: auto;
			padding: 10px;
			scrollbar-width: thin; /* Firefox */
			scrollbar-color: #00b4d8 rgba(255, 255, 255, 0.1); /* Firefox */
		}
		/* Webkit浏览器滚动条样式 */
		.message-body::-webkit-scrollbar {
			width: 6px;
		}
		.message-body::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 3px;
		}
		.message-body::-webkit-scrollbar-thumb {
			background-color: #00b4d8;
			border-radius: 3px;
		}
		.message-body::-webkit-scrollbar-thumb:hover {
			background-color: #0096c7;
		}
		
		.message-item {
			padding: 3px 4px;
			margin-bottom: 4px;
			background-color: rgba(255,255,255,0.05);
			font-size: 14px;
			display: flex;
			align-items: center;
			gap: 10px;
			transition: transform 0.3s ease, opacity 0.3s ease;
		}
		.new-message {
			opacity: 0;
			transform: translateY(-20px);
		}
		.message-body .message-item:first-child .message-content {
			color: #e7b151 !important;
		}
		.message-time {
			color: #90e0ef;
			font-size: 12px;
			width: 50px;
			flex-shrink: 0;
		}
		.message-content {
			color: #e6e6e6;
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.no-messages {
			color: #666;
			text-align: center;
			padding: 10px;
			font-size: 14px;
		}
  
		
		/* 移动端适配 */
		@media (max-width: 768px) {
			.summary-container {
				flex-wrap: wrap;
			}
			.storage-selector {
				order: 1;
				width: 100%;
			}
			.message-panel {
				width: 250px;
			}
		}
		@media (max-width: 480px) {
			.view-btn span {
				display: none;
			}
			.view-btn i {
				font-size: 18px;
			}
			.message-panel {
				width: 200px;
			}
		}
		
		.search-oprt{
			display:none;
		}
		
		.btn-danger {
			padding: 0.25rem 0.5rem;
			font-size: 0.75rem;
			margin-left: 10px;
			color: #fff;
			background-color: #dc3545;
			border-color: #dc3545;
			line-height: 1.5;
			border-radius: .2rem;
			display: inline-block;
			font-weight: 400;
			text-align: center;
			vertical-align: middle;
			user-select: none;
		}
		.btn-danger:hover {
			color: #fff;
			background-color: #c82333;
			border-color: #bd2130;
		}
    </style>
</head>
<body>
	<!-- 导航栏 -->
    <div id="floating-nav">
        <div class="nav-collapsed"></div>
        <div class="nav-content">
            <div class="nav-icon nav-icon-active" data-tooltip="库存监控" data-url="wms-2d.html">
                <i class="fas fa-chart-bar"></i>
            </div>
            <div class="nav-icon" data-tooltip="热力图" data-url="heatmap.html">
                <i class="fas fa-braille"></i>
            </div>
            <div class="nav-icon" data-tooltip="数据同步" data-url="data-sync.html">
                <i class="fas fa-exchange"></i>
            </div>
        </div>
    </div>
	
	<div class="title">
	<div class="summary-container">
        <div class="storage-selector">
            <select id="storageSelect">
                <option value="D">国内存储区</option>
                <option value="I">国际存储区</option>
            </select>
        </div>
        <div class="progress-bar">
            <div class="progress-fill" style="width: 20%">
                <div class="progress-text">20%</div>
            </div>
        </div>
        <div class="summary-stats">{{summary.used}}/{{summary.total}}</div>
	
		<div class="view-control">
			<i title="列表视图" class="fa-solid fa-th"></i>
			<a href="wms-card.html"><i title="卡片视图" class="fa fa-image"></i></a>
			<i title="侧/俯视图" class="fa-solid fa-list active"></i>
			<a href="wms-3d.html"><i title="三维视图" class="fas fa-cube" click="javascript"></i></a>
		</div>
		<div class="screen-control" id="fullscreen-component">
			<i class="fas fa-expand fullscreen-toggle" title="进入全屏"></i>
		</div>
		<!--
		<script>
		fetch('fullscreen.html')
			.then(res => res.text())
			.then(html => {
				document.getElementById('fullscreen-component').innerHTML = html;
			});
		</script>
		-->
    </div>
	</div>
	
    <div class="filter">
        <div class="view-switcher">
            <div class="view-btn" data-mode="layer">
                <i title="按层查看(俯视图)" class="fa-solid fa-layer-group"></i>
            </div>
            <div class="view-btn active" data-mode="row">
                <i title="按排查看(侧视图)" class="fa-solid fa-clone"></i>
            </div>
        </div>
        <div id="filterContainer"></div>
		<div class="search-container">
			<div class="search-oprt"><input id="selectAll" type="checkbox" class="checkbox"/>全选 
				<button id="btnReleaseSelected" class="btn btn-danger">
                    <i class="fas fa-trash-alt"></i> 释放选中
                </button>
			</div>
			<input type="text" class="search-box" placeholder="输入货物编号,按回车键">
			<i class="fas fa-search search-toggle"></i>
		</div>
    </div>
    <div id="warehouseDisplay"></div>
	<div style ="margin-left:20px">
		图例:</br>
	<table>
		<tr><td style="width:60px"><div class="rack exists free"> 1 </div></td><td style ="text-align:left">库位状态正常</td></tr>
		<tr><td style="width:60px"><div class="rack exists occupied"> 1 </div></td><td style ="text-align:left">库位状态禁用</td></tr>
	</table>
	<table>
		<tr><td style="width:60px"><div class="rack exists"><i class="goods-icon fas fa-briefcase storing"></i></div></td><td style ="width:130px">行李预存储</td><td style="width:60px"><div class="rack exists"><i class="goods-icon fas fa-box storing"></i></div></td><td style ="width:130px">空框预存储</td><td></td></tr>
		<tr><td style="width:60px"><div class="rack exists"><i class="goods-icon fas fa-briefcase stored"></i></div></td><td style ="width:130px">行李已存储</td><td style="width:60px"><div class="rack exists"><i class="goods-icon fas fa-box stored"></i></div></td><td style ="width:130px">空框已存储</td><td></td></tr>
	</table>
	<table>
		<tr>
			<td style="width:60px"><div class="rack exists"><i class="fas fa-circle runstate-icon-totime"></i></div></td><td style ="width:130px">即将到达释放时间</td>
			<td style="width:60px"><div class="rack exists"><i class="fas fa-circle runstate-icon-ontime"></i></div></td><td style ="width:130px">已经到达释放时间</td>
			<td style="width:60px"><div class="rack exists"><i class="fas fa-circle runstate-icon-overtime"></i></div></td><td style ="width:130px">超时未释放</td>
			<td></td>
		</tr>
	</table>
	</div>
	
	
	<div class="custom-tooltip">	<div class="tooltip-content">	  <div class="tooltip-column">		<div class="tooltip-title">货物信息</div><div class="tooltip-item">8932489245</div><div class="tooltip-item">releasing</div>	  </div>	  <div class="tooltip-divider"></div>	  <div class="tooltip-column">		<div class="tooltip-title">库位信息</div>		<div class="tooltip-item">5-3-1</div>		<div class="tooltip-item">正常</div>	  </div>	</div>	<div class="tooltip-item">		航班编号：CA1232<br>		航班日期：2025-10-15<br>		分配时间：10-15 12:13:15<br>		存储时间：10-15 12:15:00<br>		最早释放：10-15 14:13:12<br>		最迟释放：10-15 16:13:12<br>		<i class="fas fa-minus-circle tooltip-fas" title="点击释放"></i>	</div>  </div>
	<!-- 消息通知组件 -->
	<div class="message-notification">
		<div class="message-icon">
			<i class="fas fa-bell"></i>
			<div class="message-badge">0</div>
		</div>
		<div class="message-panel">
			<div class="message-header">
				<h3>系统消息</h3>
				<div class="message-actions">
					<button class="clear-messages">清除消息</button>
					<i class="fas fa-times message-close"></i>
				</div>
			</div>
			<div class="message-body">
				<div class="no-messages">无消息</div>
				<!--<div class="message-item">
					<div class="message-time">10:01:12</div>
					<div class="message-content">库位D101状态变为正常</div>
				</div>
				<div class="message-item">
					<div class="message-time">09:45:33</div>
					<div class="message-content">入库操作完成，货物编号8932489123</div>
				</div>
				<div class="message-item">
					<div class="message-time">09:30:05</div>
					<div class="message-content">系统检测到库位1-2-10设备故障</div>
				</div>-->
			</div>
		</div>
	</div>

    <script>
		// - 数学/工程 (笛卡尔坐标系) : X水平,Z垂直,Y平面纵深 [X列-Y排-Z层]	 
		// - 计算机图形学 (世界坐标系): X水平,Y垂直,Z平面深度 [X列-Y层-Z排] 
		// 采用计算机图形学坐标系,坐标编号X-Y-Z=[列-层-排,长-高-宽,横-高-纵,水平-垂直-纵深,左右-上下-前后]
		// 若数据是笛卡尔坐标系,需将数据转为世界坐标系[X列-Y层-Z排]后展示(Z->Y,Y->Z),转换后的coordinate(x-y-z)=转换前的(x-y-z)
		
		// 货架数据定义 status:1存在 0不存在
        let racks = [];
        (function initracks() {
            for(let z=1; z<=coord.z; z++) {
                for(let y=1; y<=coord.y; y++) {
                    for(let x=1; x<=coord.x; x++) {
						const w=warehouses.find(w => `${w.coordW[0]}-${w.coordW[1]}-${w.coordW[2]}` === `${x}-${y}-${z}`);
                        racks.push({
                            coordinate: `${x}-${y}-${z}`,
                            coordinateX: x,
                            coordinateY: y,
                            coordinateZ: z,
                            status: w ? 1 : 0,
							spaceNo:w ? w.spaceNo : ""
                        });
                    }
                }
            }
        })();
		
		// 消息数据
		//let messages = [
		//	{ time: "10:01:12", content: "库位D101状态变为正常" }
		//];
		let messages = [];
		// 获取当前时间 HH:MM:SS 格式
		function getCurrentTime() {
			const now = new Date();
			return now.toTimeString().substr(0, 8);
		}
		// 更新消息列表
		function updateMessages() {
			const $messageBody = $('.message-body');
			const $messageBadge = $('.message-badge');
			// 添加新消息到数组开头
			const newMessage = { time: getCurrentTime(), content: "库位D101，D102，D103，D104，D105状态变为正常" };
			messages.unshift(newMessage);
			if (messages.length ==1) {
				//第一条消息添加的时候，去掉无消息内容
				$messageBody.html('');
			}
			// 保持消息数量不超过200条
			if (messages.length > 200) {
				messages.pop();
				//messages = messages.slice(0, 20); // 只保留前20条消息
				$messageBody.children('.message-item').slice(200).remove();
			}
			
			// 创建新消息元素
			const $newMessage = $(`
				<div class="message-item new-message">
					<div class="message-time">${newMessage.time}</div>
					<div class="message-content" title=${newMessage.content}>${newMessage.content}</div>
				</div>
			`);
			
			// 添加到顶部
			$messageBody.prepend($newMessage);
			
			// 动画效果
			$newMessage.hide().slideDown(300, function() {
				$(this).removeClass('new-message');
			});
			// 自动滚动到顶部
			$messageBody.scrollTop(0);
			
			// 更新未读消息数量
			$messageBadge.text(messages.length).show();			
			if(messages.length === 0) {
				$messageBody.html('<div class="no-messages">无消息</div>');
				$messageBadge.hide();
			}
		}
		
		// 消息通知功能
		function initMessageNotification() {
			const $messagePanel = $('.message-panel');
			
			// 点击消息图标切换面板显示
			$('.message-icon').click(function(e) {
				e.stopPropagation();
				$messagePanel.toggleClass('active');
			});
			
			// 点击关闭按钮
			$('.message-close').click(function(e) {
				e.stopPropagation();
				$messagePanel.removeClass('active');
			});
			// 点击页面其他区域关闭消息面板
			$(document).click(function() {
				// $messagePanel.removeClass('active');
			});
			// 阻止消息面板内的点击事件冒泡
			$messagePanel.click(function(e) {
				e.stopPropagation();
			});
			
			// 清除消息
			$('.clear-messages').click(function(e) {
				e.stopPropagation();
				messages = [];
				$('.message-body').html('<div class="no-messages">无消息</div>');
				$('.message-badge').hide();
			});
			
			// TEST 自动更新消息
			setInterval(updateMessages, 5000);
		}
		
		
		let isSearchActive = false;
		function searchEvent(){
			$(document).keydown(function(e) {
				if(e.ctrlKey && e.key === 'f') {
					$('.search-toggle').click();
					return false;
				}
			});
			// 搜索功能事件处理
			$('.search-toggle').click(function() {
				if(isSearchActive) {
					// 关闭搜索
					$('.search-box').removeClass('active');//.val('');
					//$('.rack').removeClass('highlight-match');
				} else {
					// 打开搜索
					$('.search-box').addClass('active').focus();
				}
				isSearchActive = !isSearchActive;
			});

			$('.search-box').on('keydown', function(e) {
				if(e.key === 'Enter') {
					$(".search-oprt").hide();
					$('#selectAll').prop('checked', false);
					$('.highlight-match .checkbox').remove();
					$('.highlight-match').removeClass('highlight-match');
					
					const keyword = $(this).val().trim();
					if(keyword) {
						
						// 模糊搜索并添加高亮
						$(`[data-goods-info*="${keyword}"]`).each(function() {
							$(this).addClass('highlight-match')
								   .closest('.rack-group').prev('.group-title').addClass('highlight-match');
							$(this).append('<input type="checkbox" class="checkbox"/>');
						});
						const count = $('.highlight-match').length;
						const spaceNos = $('.highlight-match')
							.map(function() {
								return $(this).attr('data-spaceNo');
							}).get().join(',');
						if(count===0) alert('没有查询到符合条件的数据！');
						else{
							alert('找到'+count+'个结果,库位：' + spaceNos);
							$(".search-oprt").show();
						}
					} else {
						$('.highlight-match').removeClass('highlight-match');
					}
				}
			});
		}
		function searchOprtEvent(){
			$('#selectAll').click(function() {
                const isChecked = $(this).prop('checked');
                $('.highlight-match .checkbox').prop('checked', isChecked);
            });
			$("#btnReleaseSelected").click(function() {
                var selectedDataIds = $(".highlight-match .checkbox:checked").map(function() {
                    return $(this).closest(".highlight-match").data("coordinate");
                }).get();
                console.log("选中的data-id: " + selectedDataIds.join(", "));
				if(selectedDataIds.length===0) alert('没有选中库位！');
				else{
					
				}
            });
		}
		
		// 初始化
        $(function() {
			$('#warehouseDisplay').on('click', '.view-title .fas', function() {
				$(this).closest('.view-title').next('.view-container').slideToggle(300);
				$(this).toggleClass('fa-caret-right fa-caret-down');
			});
			$('#storageSelect').on('change', function() {
                // 变化事件函数留空
            });	
			searchEvent();
			searchOprtEvent();
			initMessageNotification();
			
			updateSumary();
		
            $('.view-btn').click(function() {
                $('.view-btn').removeClass('active');
                $(this).addClass('active');
                updateFilter();
            });
            
            updateFilter();
        });
		
		
		function updateSumary(){
			const percentage = (summary.used / summary.total * 100).toFixed(0);
            $('.summary-stats').text(`${summary.used}/${summary.total}`);
            $('.progress-fill').css('width', `${percentage}%`);
            $('.progress-text').text(`${percentage}%`);
			if(percentage==100) $('.progress-fill').addClass("progress-fill-100");
			else if(percentage>=80 && percentage<100) $('.progress-fill').addClass("progress-fill-80");
		}

        function getViewMode() {
            return $('.view-btn.active').data('mode');
        }
		

        function updateFilter() {
			const viewMode = getViewMode();
            const options = Array.from({length: viewMode === 'layer' ? coord.y : coord.z}, (_,i) => {
                const value = viewMode === 'layer' ? coord.y-i : coord.z-i;
                const label = viewMode === 'layer' ? `${value}层` : `${value}排`;
                return `<option value="${value}">${label}</option>`;
            }).join('');
            
            $('#filterContainer').html(`
                ${viewMode === 'layer' ? '按层查看' : '按排查看'}
                <select id="paramSelect">
					<option value="0">全部</option>
					${options}
				</select>
            `);
            
            $('#paramSelect').on('change', updateDisplay);
            updateDisplay();
        }

        function updateDisplay() {
            const viewMode = getViewMode();
            const paramSelect = $('#paramSelect').val() || 1;
            $('#warehouseDisplay').empty();
			
			if(paramSelect==0){
				const params = viewMode === 'layer' ? coord.y : coord.z;
				for(let i=params;i>0;i--){
					var param = i;
					const label = viewMode === 'layer' ? `层` : `排`;
					$('#warehouseDisplay').append("<div class='view-title'><i class='fas fa-caret-down'></i>"+param+label+"</div>");
					updateDisplay2(param);
				}
			}else{
				updateDisplay2(paramSelect);
			}
			updateState();//更新库位状态
			updateGoods();
        }
		function updateDisplay2(param) {
            const viewMode = getViewMode();
            // 筛选数据
            const filtered = racks.filter(item => 
                viewMode === 'layer' ? item.coordinateY == param : item.coordinateZ == param
            );

            // 分组处理
            const groups = {};
            filtered.forEach(item => {
                const groupKey = viewMode === 'layer' ? item.coordinateZ : item.coordinateY;
                groups[groupKey] = groups[groupKey] || [];
                groups[groupKey].push(item);
            });

            // 创建视图
            const viewContainer = $('<div>').addClass('view-container');
            
            Object.keys(groups).sort((a,b) => b - a).forEach(groupKey => {
                const groupDiv = $('<div>').addClass('rack-group');
                if(viewMode === 'layer') groupDiv.addClass('rack-group-row');
                // 组标题
                $('<div>')
                    .addClass('group-title')
                    .text(viewMode === 'layer' ? `${groupKey}排` : `${groupKey}层`)
                    .appendTo(groupDiv);

                // 库位行
                const rowDiv = $('<div>').addClass('row');
                
                groups[groupKey]
                    .sort((a,b) => a.coordinateX - b.coordinateX)
                    .forEach(item => {
                        const $rack = $('<div>')
								.addClass(`rack ${item.status ? 'exists' : ''}`)
								.text(item.status ? item.coordinateX: '')
								.attr('data-coordinate',`${item.coordinate}`)
								.attr('data-spaceNo',`${item.spaceNo}`)
								.attr('title', 
									`货架坐标：${item.coordinate}\n` +
									`货架状态：${item.status ? '库位' : '无库位'}`
								);
						
						// 查找匹配的货物信息 fa-box fa-briefcase
						// const goods = goodsData.find(g => g.spaceNo === item.coordinate);
						// if(goods) {
						// 	var goods_state_class="";
						// 	if(goods.state ==="storing") goods_state_class="storing";
						// 	if(goods.state ==="stored") goods_state_class="stored";
						// 	var goods_title=`货物编号：${goods.goodsNo}\n` +
						// 					`库位编号：${item.coordinate}`;
						// 	$rack.append(
						// 		$('<i>').addClass(`goods-icon fas fa-briefcase ${goods_state_class}`)
						// 		.attr('title',`${goods_title}`)
						// 	)
						// 	.attr('data-goods-info',`${goods.goodsNo}`);
						// } else {
						// 	// 该位置存在库位才显示列号
						// 	if(item.status) $rack.text(item.coordinateX);
						// }
						$rack.appendTo(rowDiv);
                    });
                
                groupDiv.append(rowDiv);
                viewContainer.append(groupDiv);
            });

            $('#warehouseDisplay').append(viewContainer);
        }
		
		// 更新库位状态
		function updateState(){
			$('.view-container .rack.exists').each(function(index,element){
				//console.log($(element).attr('data-coordinate'));
				var deviceState="状态：未知";
				var spaceNo = $(element).attr('data-spaceNo');
				const ws = warehouseStates.find(w => w.spaceNo === spaceNo);
				if(ws){
					$(element).removeClass("free occupied");
					if(ws.deviceState ==="Normal"){
						$(element).addClass("free");
					}else{
						$(element).addClass("occupied");
					}
					deviceState =ws.deviceState ==="Normal" ? '正常' : '禁用';
				}else{
					// 未知状态
				}
				$(element).attr('device-state',`${deviceState}`);
//updateGoods
//				var goodsTips = '<div class="tooltip-item">无</div>';
//				$(element).append(
//				'  <div class="custom-tooltip">' + 
//				'	<div class="tooltip-content">' + 
//				'	  <div class="tooltip-column">' + 
//				'		<div class="tooltip-title">货物信息</div>' + goodsTips +
//				'	  </div>' + 
//				'	  <div class="tooltip-divider"></div>' + 
//				'	  <div class="tooltip-column">' + 
//				'		<div class="tooltip-title">库位信息</div>' + 
//				'		<div class="tooltip-item">'+spaceNo+'</div>' + 
//				'		<div class="tooltip-item">'+deviceState+'</div>' + 
//				'	  </div>' + 
//				'	</div>' + 
//				'  </div>'
//				)

			});
		}
		//更新货物信息
		function updateGoods(){
			$('.view-container .rack').each(function(index,element){
				var spaceNo = $(element).attr('data-spaceNo');
				var deviceState = $(element).attr('device-state');
				// 查找匹配的货物信息
				const goods = goodsData.find(g => g.spaceNo === spaceNo);
				var goodsTips="";
				var goodsDetails="";
				if(goods){
					//货物图标
					var goods_icon="fa-briefcase";
					if(goods.goodsType ==="pallet") goods_icon="fa-box";
					//货物状态
					var goods_state_class="";
					var goods_state_title="";
					if(goods.state ==="storing") {
						goods_state_class="storing";
						goods_state_title="已分配";
					} else if(goods.state ==="stored") {
						goods_state_class="stored";
						goods_state_title="已存储";
					} else{
						goods_state_title=goods.state;
					}
					var goods_type_state_title = (goods.goodsType ==="pallet"?"空框,":"行李,") +goods_state_title;
					var goods_state_run_class="";
					var goods_state_run_title="";
					// TODO
					if(goods.state ==="storing") {
						goods_state_run_class="runstate-icon-totime";
						goods_state_run_title="即将释放";
					} else if(goods.state ==="stored") {
						//goods_state_run_class="runstate-icon-ontime";
						//goods_state_run_title="已到释放时间";
					} else if(goods.state ==="releasing") {
						goods_state_run_class="runstate-icon-overtime";
						goods_state_run_title="超时未释放";
					}
					var goods_icon_div ='<i class="goods-icon fas '+ goods_icon +' '+goods_state_class+'" title ="'+goods_type_state_title+'">'+
											'<i class="fas fa-circle '+goods_state_run_class+'" title ="'+goods_state_run_title+'"></i>'+
										'</i>';
					//有货物不显示列号
					$(element).text('')
					.append(goods_icon_div)
					.attr('data-goods-info',`${goods.goodsNo} ${goods.flightNo}`);
					
					goodsTips = '<div class="tooltip-item">'+goods.goodsNo+'</div>' + 
								'<div class="tooltip-item">'+goods_state_title+'</div>';
					goodsDetails='	<div class="tooltip-item">' + 
								'		航班编号：CA1232</br>' + 
								'		航班日期：2025-10-15</br>' + 
								'		分配时间：10-15 12:13:15</br>' + 
								'		存储时间：10-15 12:15:00</br>' + 
								'		最早释放：10-15 14:13:12</br>' + 
								'		最迟释放：10-15 16:13:12</br>' + 
								'		<i class="fas fa-minus-circle tooltip-fas" title ="点击释放"></i>'+
								'	</div>';
				}else{
					goodsTips = '<div class="tooltip-item">无</div>';
				}
				$(element).append(
				'  <div class="custom-tooltip">' + 
				'	<div class="tooltip-content">' + 
				'	  <div class="tooltip-column">' + 
				'		<div class="tooltip-title">货物信息</div>' + goodsTips +
				'	  </div>' + 
				'	  <div class="tooltip-divider"></div>' + 
				'	  <div class="tooltip-column">' + 
				'		<div class="tooltip-title">库位信息</div>' + 
				'		<div class="tooltip-item">'+spaceNo+'</div>' + 
				'		<div class="tooltip-item">'+deviceState+'</div>' + 
				'	  </div>' + 
				'	</div>' + goodsDetails + 
				'  </div>'
				)
			});
		}
    </script>
</body>
</html>